<template>
	<view class="card-pack">
		<g-navbar title="我的结算卡" />
		<view class="main">
			<view class="operation-bar">
				<view class="operation-item" @click="clickUpload" v-if="uploadSheetComp.length">
					<i class="icon iconfont icon-upload" />
					<text>上传</text>
				</view>
			</view>
			<view class="card-list">
				<view class="card-item-wrapper" v-for="item,index in cardList" :key="index">
					<view class="card-cover-wrapper"
						:style="{'background':`url(${item.cover}) no-repeat`,'backgroundSize':'100% 100%'}">
						<view class="card-info">
							<view class="card-icon">
								<image :src="item.icon" style="width: 100%;height: 100%;" />
							</view>
							<view class="info-main">
								<view class="info-title">
									{{item.title}}
								</view>
								<view class="info-desc">
									{{item.desc}}
								</view>
							</view>
						</view>
					</view>
					<view class="card-operation-button-wrapper">
						<view class="btn-item" :class="{'disabled':item.status !==CARD_CHECK_STATUS.SUCCESS}"
							@click="jump(item.status !==CARD_CHECK_STATUS.SUCCESS?'':item.view_path)">
							<i class="icon iconfont icon-card-bind" />
							<text>{{item.btn_text_right}}</text>
						</view>
						<view class="btn-item" @click="jump(item.bind_path)">
							<i class="icon iconfont icon-card-info" />
							<text>{{item.btn_text_left}}</text>
						</view>
					</view>
					<view class="check-prompt" v-if="item.status ===CARD_CHECK_STATUS.CHECKING">审核中</view>
					<view class="upload-btn" v-else-if="item.status ===CARD_CHECK_STATUS.UNBOUND"
						@click="jump(item.bind_path)">立即上传</view>
				</view>
				<g-placeholder v-if="!cardList.length" />
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import REST_URL from '@/http/http.restUrl';
	import { useStore } from 'vuex';
	import { CARD_COVER, CARD_ICON, CARD_TYPE, CARD_LEFT_BTN_TEXT, CARD_RIGHT_BTN_TEXT, BIND_PATH, BIND_NAME, VIEW_PATH, CARD_CHECK_STATUS } from '@/enum/card_pack';
	import type {
		IBankCardInfo,
		IIdCardInfo,
		IWeChatCardInfo,
	} from '@/types/card';
	import { computed, ComputedRef, Ref, ref, reactive } from "vue";
	import { GET_STORE_USERINFO } from '@/store/gettersType';


	const store = useStore();

	interface ICardInfo {
		bank_info : IBankCardInfo;
		id_card : IIdCardInfo;
		wechat : IWeChatCardInfo;
	}

	interface ICard {
		cover : CARD_COVER,
		icon : CARD_ICON,
		title : string | null;
		desc : string | null;
		type : CARD_TYPE,
		bind_path : BIND_PATH,
		view_path : VIEW_PATH,
		btn_text_right : CARD_RIGHT_BTN_TEXT,
		btn_text_left : CARD_LEFT_BTN_TEXT,
		status : CARD_CHECK_STATUS,
	}



	interface IUploadSheetItem {
		path : BIND_PATH,
		value : BIND_NAME,
	}

	let cardList : Ref<ICard[]> = ref([]);


	uni.$off('updateCardPackList');
	uni.$on('updateCardPackList', () => getCardList())


	const getCardList = async () : Promise<void> => {
		await uni.loginManger.$interceptor;
		const data = (await uni.http.POST(REST_URL.getCardList, {
			customer_id: store.getters[GET_STORE_USERINFO].id,
		})).data;
		cardList.value = [];
		const { bank_info, id_card, wechat } = (data as ICardInfo);
		cardList.value.push(createCardItem(CARD_TYPE.BANK, bank_info));
		cardList.value.push(createCardItem(CARD_TYPE.ID, id_card));
		cardList.value.push(createCardItem(CARD_TYPE.WX, wechat));
	}

	const createCardItem = (type : CARD_TYPE, cardInfo : IBankCardInfo | IIdCardInfo | IWeChatCardInfo) : ICard => {
		let temp : ICard = ({} as ICard);
		switch (type) {
			case CARD_TYPE.BANK:
				temp.cover = CARD_COVER.BANK;
				temp.icon = CARD_ICON.BANK;
				temp.type = CARD_TYPE.BANK;
				temp.bind_path = BIND_PATH.BANK;
				temp.view_path = VIEW_PATH.BANK;
				temp.btn_text_left = CARD_LEFT_BTN_TEXT.BANK;
				temp.btn_text_right = CARD_RIGHT_BTN_TEXT.BANK;
				temp.status = (cardInfo as IBankCardInfo).bank_status;
				temp.title = (cardInfo as IBankCardInfo).bank_name ? (cardInfo as IBankCardInfo).bank_name : '结算银行卡';
				temp.desc = (cardInfo as IBankCardInfo).bank_no ? (cardInfo as IBankCardInfo).bank_no : '绑定银行卡以便结算使用';
				break;
			case CARD_TYPE.ID:
				temp.cover = CARD_COVER.ID;
				temp.icon = CARD_ICON.ID;
				temp.type = CARD_TYPE.ID;
				temp.bind_path = BIND_PATH.ID;
				temp.view_path = VIEW_PATH.ID;
				temp.btn_text_left = CARD_LEFT_BTN_TEXT.ID;
				temp.btn_text_right = CARD_RIGHT_BTN_TEXT.ID;
				temp.status = (cardInfo as IIdCardInfo).id_card_status;
				temp.title = (cardInfo as IIdCardInfo).true_name ? (cardInfo as IIdCardInfo).true_name : '身份证';
				temp.desc = (cardInfo as IIdCardInfo).id_card_no ? (cardInfo as IIdCardInfo).id_card_no : '上传身份证以便查看';
				break;
			case CARD_TYPE.WX:
				temp.cover = CARD_COVER.WX;
				temp.icon = CARD_ICON.WX;
				temp.type = CARD_TYPE.WX;
				temp.bind_path = BIND_PATH.WX;
				temp.view_path = VIEW_PATH.WX;
				temp.btn_text_left = CARD_LEFT_BTN_TEXT.WX;
				temp.btn_text_right = CARD_RIGHT_BTN_TEXT.WX;
				temp.title = '微信收款码';
				temp.desc = '';
				temp.status = (cardInfo as IWeChatCardInfo).wechat_img_status;
				break;
		}
		return temp
	}

	const uploadSheetComp : ComputedRef<IUploadSheetItem[]> = computed(() => {
		const list : IUploadSheetItem[] = [];
		if (!cardList.value.find((item : ICard) => item.type === CARD_TYPE.BANK)) {
			const sheetTemp : IUploadSheetItem = ({} as IUploadSheetItem);
			sheetTemp.path = BIND_PATH.BANK;
			sheetTemp.value = BIND_NAME.BANK;
			list.push(sheetTemp);
		}
		if (!cardList.value.find((item : ICard) => item.type === CARD_TYPE.ID)) {
			const sheetTemp : IUploadSheetItem = ({} as IUploadSheetItem);
			sheetTemp.path = BIND_PATH.ID;
			sheetTemp.value = BIND_NAME.ID;
			list.push(sheetTemp);
		}
		if (!cardList.value.find((item : ICard) => item.type === CARD_TYPE.WX)) {
			const sheetTemp : IUploadSheetItem = ({} as IUploadSheetItem);
			sheetTemp.path = BIND_PATH.WX;
			sheetTemp.value = BIND_NAME.WX;
			list.push(sheetTemp);
		}
		return list
	})

	const clickUpload = () => {
		console.log(uploadSheetComp)
		let sheelNameList : string[] = [];
		sheelNameList = uploadSheetComp.value.map((item : IUploadSheetItem) => item.value);
		uni.showActionSheet({
			itemList: sheelNameList,
			success: (res) => {
				console.log(res.tapIndex)
				jump(uploadSheetComp.value[res.tapIndex].path);
				// console.log('选中了第' + (uploadSheetComp.value[res.tapIndex]).value + '个按钮');
			},
		});
	}

	const jump = (path : BIND_PATH) => {
		if (!path) {
			return
		}
		uni.router.route(path);
	}

	getCardList();
</script>

<style scoped lang="scss">
	@import "./cardPack.scss";
</style>